<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--    引入本地的vue.js文件-->
  <script src="../js/vue.js"></script>
</head>
<body>

<!--
    vue中的指令       实现节点对象的显示和隐藏
    v-if : true  显示   false  隐藏         通过添加和删除节点实现
    v-else-if
    v-else:  需要紧跟在v-if后面  呈现一个分支结构

    v-show : true  显示   false  隐藏       通过添加css样式实现  display: none

    选择的原则:    节点变化比较频繁时  可以选择使用 v-show
-->
<div id="app">
  <p v-if="isShow">通过数据的设置可以实现该元素的显示和隐藏 v-if</p>
  <p v-else-if="isShow">通过数据的设置可以实现该元素的显示和隐藏 v-if2</p>
  <p v-else>通过数据的设置可以实现该元素的显示和隐藏 v-if3</p>


  <p v-show="isShow">通过数据的设置可以实现该元素的显示和隐藏 v-show</p>

  <button @click="changShow">切换显示和隐藏元素</button>
</div>

<script>

  let vm = new Vue({
      el:'#app',
      data:{
        isShow:false
      },
      methods:{
        changShow(){
           this.isShow = !this.isShow;
        }
      }
    })
</script>

</body>
</html>